<template>
    <view class="wallet-page">
        <!-- 钱包内容 -->
        <view class="wallet-content">
            <!-- 推广费模块 -->
            <view class="wallet-card1">
                <view class="credit-header-left">
                    <view class="title">到账推广费</view>
                    <view class="score">{{ userInfo.promotion_fee }}</view>
                </view>
                <view class="avatar-info">
                    <view class="title-chat">授权微信</view>
                    <view class="header-img">
                        <image v-if="userInfo.avatar_full" :src="userInfo.avatar_full" mode="aspectFill"></image>
                        <image v-else src="/static/personalCenter/avatar.png" mode="aspectFill"></image>
                        <text class="avatar-name ellipsis">{{ userInfo.nickname }}</text>
                    </view>

                </view>
                <view class="aside" @click="toPromotionDetail">
                    <text>推广费明细</text>
                    <image class="right-details-icon" src="/static/personalCenter/details-right.png" mode="aspectFill">
                    </image>
                </view>
            </view>

            <!-- 信息费抵扣模块 -->
            <view class="wallet-card2">
                <view class="credit-header-left">
                    <view class="title">信息费抵扣额</view>
                    <view class="score">{{ userInfo.remain_deduction_fee }}</view>
                </view>
                <view class="aside" @click="toDeductionDetail">
                    <text>抵扣额明细</text>
                    <image class="right-details-icon" src="/static/personalCenter/details-right.png" mode="aspectFill">
                    </image>
                </view>
            </view>

            <!-- 温馨提示 -->

            <view class="tips-box">
                <view class="card-footer" v-if="userInfo.car_owner_type === 2">
                    <text class="tip-text" >您是运营车辆车主，不收取信息费</text>
                </view>
                <view class="tips-content">温馨提示：</view>
                <view class="tips-content">平台用户推广费实时发放至授权微信零钱，授权微信不可变更</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: null
        }
    },
    onShow(options) {
        this.userInfo = uni.getStorageSync('userInfo')

    },
    onLoad() {},
    methods: {
        authWechat() {
            uni.showModal({
                title: '提示',
                content: '确定要授权微信吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 实际项目中这里调用微信授权接口
                        uni.showToast({
                            title: '授权成功',
                            icon: 'success'
                        })
                    }
                }
            })
        },
        toPromotionDetail() {
            uni.navigateTo({
                url: '/pages/personalCenter/wallet/promotionFeeDetail'
            })
        },
        toDeductionDetail() {
            uni.navigateTo({
                url: '/pages/personalCenter/wallet/deductionsDetail'
            })
        }
    }
}
</script>

<style scoped>
.wallet-content {
    padding: 30rpx;
}

.wallet-card1 .avatar-info {}

.header-img {
    display: flex;
    align-items: center;
}

.wallet-card1 .header-img image {
    width: 64rpx;
    height: 64rpx;
    border: 2rpx solid #FFFFFF;
    border-radius: 50%;
    margin-right: 12rpx;
}

.wallet-card1 .header-img .avatar-name {
    display: inline-block;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 48rpx;
}

.wallet-card1 .credit-header-left {
    padding-left: 48rpx;
}

.wallet-card1 .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 48rpx;
    padding-bottom: 30rpx;
}

.title-chat {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    padding-bottom: 30rpx;
    padding-top: 24rpx;
}


.wallet-card1 .score {
    font-family: DINPro, DINPro;
    font-weight: 500;
    font-size: 48rpx;
    color: #FFFFFF;
    line-height: 48rpx;
}

.wallet-card1 .aside {
    width: 192rpx;
    height: 52rpx;
    background: rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 60rpx 0 0 60rpx;
}

.wallet-card1 .aside .right-details-icon {
    width: 20rpx;
    height: 25rpx;
}

.wallet-card1 {
    width: 100%;
    height: 220rpx;
    background-image: url("~@/static/personalCenter/wallet-bg2.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wallet-card2 .credit-header-left {
    padding-left: 48rpx;
}

.wallet-card2 .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 48rpx;
    padding-bottom: 30rpx;
}

.wallet-card2 .score {
    font-family: DINPro, DINPro;
    font-weight: 500;
    font-size: 48rpx;
    color: #FFFFFF;
    line-height: 48rpx;
}

.wallet-card2 .aside {
    width: 192rpx;
    height: 52rpx;
    background: rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 60rpx 0 0 60rpx;
}

.aside .right-details-icon {
    width: 20rpx;
    height: 25rpx;
}

.wallet-card2 {
    width: 100%;
    height: 220rpx;
    background-image: url("~@/static/personalCenter/wallet-bg1.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
}

.card-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 48rpx;
}

.card-action {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 40rpx;
}

.card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.amount {
    font-family: DINPro, DINPro;
    font-weight: 500;
    font-size: 48rpx;
    color: #FFFFFF;
    line-height: 48rpx;
}

.auth-btn {
    background-color: #07C160;
    color: #fff;
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    margin: 0;
}

.auth-btn::after {
    border: none;
}

.card-footer {
    text-align: center;
    padding-bottom: 28rpx;
    border-bottom: 2rpx solid #EEEEEE;
}

.wechat-name {
    font-size: 28rpx;
    color: #999;
}

.tip-text {
    font-size: 28rpx;
    color: #999;
}

.tips-box {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx 40rpx 56rpx 40rpx;
}

.tips-box .tips-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
}

.tips-box .tips-content {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 48rpx;
    padding-top: 20rpx;
}
</style>